<template>
	<view>
		<l-painter
			:custom-style="'transform: scale(' + 343 / 375 + '); transform-origin: left top;'"
			isBase64ToPath
			isRenderImage
			:board="board"
			@success="success"
			@fail="fail"
		></l-painter>
		<view class="share-view">
			<view class="share-li">
				<button class="share-btn" open-type="share">
					<view class="icon-view"><u-icon name="moments" top="12" color="#ffffff" size="50"></u-icon></view>
					<view class="share-btn-label">分享好友</view>
				</button>
			</view>
			<view class="share-li" @click="saveImage">
				<button class="share-btn">
					<view class="icon-view"><u-icon name="moments" top="12" color="#ffffff" size="50"></u-icon></view>
					<view class="share-btn-label">保存图片</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		detail: {
			type: Object,
			default: () => {
				return {
					goodsImg: '',
					goodsPrice: '',
					marketPrice: '',
					goodsName: ''
				};
			}
		}
	},
	data() {
		return {
			poster: '',
		};
	},
	computed: {
		hasLogin() {
			return this.$store.state.hasLogin;
		},
		wxUserInfo() {
			return this.$store.state.wxUserInfo;
		},
		board(){
			return {
				width: '600rpx',
				height: '891rpx',
				background: 'linear-gradient(135deg, #ff971b 0%, #ff5000 100%)',
				views: [
					// 商品海报背景0
					{
						type: 'view',
						css: {
							left: '32rpx',
							top: '114rpx',
							background: '#ffffff',
							radius: '12rpx',
							width: '537rpx',
							height: '748rpx',
							shadow: '0 20rpx 48rpx rgba(0,0,0,.05)'
						}
					},
					// 分享人头像1
					{
						type: 'image',
						url: this.$store.state.wxUserInfo.avatarUrl,
						css: {
							left: '32rpx',
							top: '32rpx',
							width: '70rpx',
							height: '70rpx',
							// border: '1px solid #000',
							radius: '50%',
							color: '#999999'
						}
					},
					// 分享人名称2
					{
						type: 'text',
						text:  this.$store.state.wxUserInfo.nickName,
						css: {
							color: '#ffffff',
							left: '114rpx',
							top: '32rpx',
							fontSize: '28rpx',
							fontWeight: 'bold'
						}
					},
					// 标语3
					{
						type: 'text',
						text: '为您挑选了一个好物',
						css: {
							color: 'rgba(255,255,255,.7)',
							left: '114rpx',
							top: '72rpx',
							fontSize: '20rpx'
						}
					},
					// 商品图片4
					{
						type: 'image',
						url: this.detail.goodsImg,
						css: {
							left: '58rpx',
							top: '140rpx',
							width: '486rpx',
							height: '486rpx',
							radius: '10rpx'
						}
					},
					// 商品价格5
					{
						type: 'view',
						css: {
							height: '58rpx',
							color: '#FF0000',
							left: '56rpx',
							top: '662rpx',
							fontWeight: 'bold',
							fontSize: '26rpx',
							lineHeight: '.61em',
							verticalAlign: 'bottom'
						},
						views: [
							{
								type: 'text',
								text: '￥',
								css: {}
							},
							{
								type: 'text',
								text: this.detail.goodsPrice,
								css: {
									fontSize: '36rpx'
								}
							},
							// {
							// 	type: 'text',
							// 	text: '.39',
							// 	css: {}
							// },
							{
								type: 'text',
								text: '￥'+ this.detail.marketPrice,
								css: {
									paddingLeft: '20rpx',
									fontWeight: 'normal',
									textDecoration: 'line-through',
									color: '#999'
								}
							}
						]
					},
					// 商品名称6
					{
						type: 'text',
						text: this.detail.goodsName,
						css: {
							maxLines: 2,
							width: '316rpx',
							color: '#333333',
							left: '56rpx',
							top: '766rpx',
							fontSize: '26rpx',
							lineHeight: '40rpx'
						}
					},
					// 二维码 小程序吗7
					{
						type: 'image',
						url: '../../static/logo.png',
						css: {
							left: '410rpx',
							top: '678rpx',
							width: '126rpx',
							height: '126rpx'
						}
					}
				]
			}
		}
	},
	created() {
		// this.board.views[1].url = this.wxUserInfo.avatarUrl;
		// this.board.views[2].text = this.wxUserInfo.nickName;
	},
	methods: {
		fail(v) {
			console.log('fail::', v);
		},
		saveImage() {
			uni.saveImageToPhotosAlbum({
				filePath: this.poster,
				success: () => {
					this.$u.toast('保存成功');
					// _this.$emit('saveImage');
				}
			});
		},
		success(poster) {
			console.log(poster)
			this.poster = poster;
		}
	}
};
</script>

<style lang="scss">
.share-view {
	display: flex;
	// padding: 30upx 0;
	.share-li {
		flex: 3;
		.share-btn {
			background-color: transparent;
			font-size: 26upx;
			&::after {
				border: 0 none;
			}
			.icon-view {
				display: inline-block;
				width: 90upx;
				height: 90upx;
				border-radius: 100%;
				background-color: #18b566;
				line-height: 90upx;
				text-align: center;
				margin-bottom: 10upx;
			}
		}
	}
}
</style>
